<template>
  <div class="checkInDailyBox" style="padding: 48rpx;">
      <div class="calendar">
          <view class="checkInDailyTitle">{{ checkInDailyTitle }}</view>
          <div class="title">
              <slot v-if="$slots.title" name="title"></slot>
              <div v-else class="header-wrap">
                  <div class="flex">
                      <div class="title">{{ title }}</div>
                      <div class="month">
                          <template v-if="title">
                              (
                          </template>
                          {{ selectDay.month }}月{{ selectDay.day }}日
                          <template v-if="title">
                              )
                          </template>
                      </div>
                  </div>
                  <div v-if="!(nowDay.year==selectDay.year&&nowDay.month==selectDay.month&&nowDay.day==selectDay.day)"
                      class="today" @click="switchNowDate">
                      回到今日
                  </div>
              </div>
          </div>
          <!-- 切换上周、本周、下周的按钮 -->
          <!-- <div class="week-switcher">
              <button @click="switchWeek(-1)">上周</button>
              <button @click="switchWeek(0)">本周</button>
              <button @click="switchWeek(1)">下周</button>
          </div> -->
          <!-- 日历头部 -->
          <div class="flex-around calendar-week">
              <div class="view mr2">一</div>
              <div class="view mr2">二</div>
              <div class="view mr2">三</div>
              <div class="view mr2">四</div>
              <div class="view mr2">五</div>
              <div class="view mr2">六</div>
              <div class="view">日</div>
          </div>
          <!-- 日历主体 -->
          <swiper class="swiper" :style="'height:' + (swiperHeight) + 'rpx'" @change="swiperChange" :circular="true"
              :current="swiperCurrent" :duration="swiperDuration">
              <!-- <swiper-item v-for="(listItem, listIndex) in calendarData" :key="listIndex">
                  <div class="flex-start flex-wrap calendar-main" :data-length="listItem.length">
                      <div v-for="(item, index) in listItem" :key="index" class="day">
                          <div
                              :class="'bg ' + (item.month === selectDay.month?processSpotMap[item.year+'-'+item.month+'-'+item.day]?processSpotMap[item.year+'-'+item.month+'-'+item.day]:'':'') + '  ' + ((item.year === selectDay.year && item.month === selectDay.month) ? (item.day === selectDay.day && oldCurrent === listIndex ?'select':''): 'other-month') + ''"
                              @tap.capture="selectChange"
                              :data-day="item.day"
                              :data-year="item.year"
                              :data-month="item.month">
                              {{ item.day }}
                              <span v-if="spotMap[item.year + '-' + item.month + '-' + item.day]" class="check-in-status">{{ spotMap[item.year + '-' + item.month + '-' + item.day]? '✔' : '' }}</span>
                          </div>
                      </div>
                  </div>
              </swiper-item> -->
              <swiper-item v-for="(listItem, listIndex) in calendarData" :key="listIndex">
                  <div class="flex-start flex-wrap calendar-main" :data-length="listItem.length">
                      <div v-for="(item, index) in listItem" :key="index" class="day">
                          <div :class="'bg ' + (item.month === selectDay.month ? processSpotMap[item.year+'-'+item.month+'-'+item.day]?processSpotMap[item.year+'-'+item.month+'-'+item.day]:'':'') + '  ' + ((item.year === selectDay.year && item.month === selectDay.month) ? (item.day === selectDay.day && oldCurrent === listIndex ?'select':''): 'other-month') + ''"
                              @tap.capture="selectChange" :data-day="item.day" :data-year="item.year"
                              :data-month="item.month">
                              <div :class="[(item.day === selectDay.day && oldCurrent === listIndex ) ? 'flag' : 'noflag']" ></div>
                              <div class="date">{{ item.day }}</div>
                              <div class="week">{{ getWeekDay(item.year, item.month, item.day) }}</div>
                              <!-- <div class="check-in-status">{{ processSpotMap[item.year+'-'+item.month+'-'+item.day]? '✔' : '-' }}</div> -->
                          </div>
                      </div>
                  </div>
              </swiper-item>
          </swiper>
          <div @click="openChange" class="flex list-open">
              <div class="list-openL"></div>
              <div :class="'icon ' + (open?'fold':'unfold') + ''"></div>
              <div class="list-openR"></div>
          </div>

          <view class="checkInDailyRecordD" :class="checkInStatusClass">
              <span></span>今日签到成功
          </view>
      </div>
  </div>
</template>
<script>

export default {
  /**
       * 组件的初始数据
       */
  data () {
      return {
          selectDay: {
              year: '-',
              month: '-',
              day: '-'
          },
          // 选中时间
          nowDay: {},
          // 现在时间
          open: false,
          swiperCurrent: 1,
          // 选中时间
          oldCurrent: 1,
          // 之前选中时间
          dateList0: [],
          // 0位置的日历数组
          dateList1: [],
          // 1位置的日历数组
          dateList2: [],
          // 2位置的日历数组
          swiperDuration: 500,
          swiperHeight: 0,
          backChange: false, // 跳过change切换
          checkInData: {}, // 存储签到数据，格式为 { '2024-10-01': true, '2024-10-02': false }
          checkInDailyTitle: '本周签到进度',
          checkInDailyFlag:'本周',
          checkInStatusClass: '', // 新增属性，用于存储要应用的样式类名
          checkInStatusText: ''
      }
  },
  computed: {
      processSpotMap (data) {
          console.log(data,'processSpotMap')
          const spotMap = data.spotMap
          const processSpotMap = {}
          console.log(spotMap,'spotMap---')
          if (spotMap.length > 0) {
              for (const iterator of spotMap) {
                  if (iterator.status === 1) {
                      processSpotMap[iterator.date.replace(/\b(0+)/gi, '')] = 'deep-spot'
                  } else {
                      processSpotMap[iterator.date.replace(/\b(0+)/gi, '')] = 'spot'
                  }
              }
          }
           // 未签到或没有 status 的情况
          const currentDate = this.formatOutputDate(this.selectDay);
          if (!processSpotMap[currentDate]) {
              processSpotMap[currentDate] = 'spot';
          }
          return processSpotMap;
      },
      calendarData () {
          return [
              this.dateList0,
              this.dateList1,
              this.dateList2
          ]
      }

  },
  /**
       * 初始化
       */
  create () {
      const spotMap = this.spotMap
      const processSpotMap = {}

      if (spotMap.length > 0) {
          for (const iterator of spotMap) {
              if (iterator.status === 0) {
                  processSpotMap[iterator.date.replace(/\b(0+)/gi, '')] = 'spot'
              } else {
                  processSpotMap[iterator.date.replace(/\b(0+)/gi, '')] = 'deep-spot'
              }
          }
      }

      this.processSpotMap = processSpotMap
  },
  mounted () {
      const now = this.defaultTime ? new Date(this.defaultTime) : new Date()
      const selectDay = {
          year: now.getFullYear(),
          month: now.getMonth() + 1,
          day: now.getDate()
      }
      this.nowDay = {
          year: now.getFullYear(),
          month: now.getMonth() + 1,
          day: now.getDate()
      }
      this.setMonth(selectDay.year, selectDay.month, selectDay.day)
      this.updateList(now, -1, 0)
      this.updateList(now, 0, 1)
      this.updateList(now, 1, 2)
      this.setSwiperHeight(1)
      // 模拟签到数据
      this.checkInData['2024-10-16'] = true;
      this.checkInData['2024-10-17'] = true;
      this.updateCheckInStatus(selectDay);
  },
  /**
       * 组件的属性列表
       */
  props: {
      spotMap: {
          // 标点的日期
          type: Array,
          default () {
              return []
          }
      },
      defaultTime: {
          // 标记的日期，默认为今日 注意：传入格式推荐为'2022/1/2'或'2022/01/02', 其他格式在ios系统上可能出现问题
          type: String,
          default: ''
      },
      title: {
          // 标题
          type: String,
          default: ''
      },
      defaultOpen: {
          // 是否是打开状态
          type: Boolean,
          default: false
      },
      showShrink: {
          // 是否显示收缩展开功能
          type: Boolean,
          default: true
      }
  },

  watch: {
      defaultOpen (value) {
          this.open = value
      }

  },
  /**
       * 组件的方法列表
       */
  methods: {
      switchWeek(offset) {
          const now = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day);
          now.setDate(now.getDate() + offset * 7);
          this.setMonth(now.getFullYear(), now.getMonth() + 1, now.getDate());
          this.updateList(now, -1, 0);
          this.updateList(now, 0, 1);
          this.updateList(now, 1, 2);
          this.setSwiperHeight(1);
      },
      getWeekDay(year, month, day) {
          const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
          const date = new Date(year, month - 1, day);
          return weekDays[date.getDay()];
      },
      swiperChange (e) {
          this.swiperCurrent = e.detail.current

          // 日历滑动时触发的方法
          if (this.backChange) {
              this.backChange = false
              return
          } // 计算第三个索引

          const rest = 3 - e.detail.current - this.oldCurrent
          const dif = e.detail.current - this.oldCurrent
          console.log(dif,'dif')

          let nowDate
          if (dif > 0) {
              // 右滑
              nowDate = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day + 7);
          } else if (dif < 0) {
              // 左滑
              nowDate = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day - 7);
          }
          console.log(nowDate,'nowDate',this.nowDay)
          // 将 this.nowDay 转换为 Date 对象
          const currentDate = new Date(this.nowDay.year, this.nowDay.month - 1, this.nowDay.day);
          // 计算当前周的第一天
          const currentWeekStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - currentDate.getDay() + 1);
          // 计算当前周的最后一天
          const currentWeekEnd = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - currentDate.getDay() + 7);

          if (nowDate < currentWeekStart) {
              this.checkInDailyTitle = '上周签到进度';
              this.checkInDailyFlag ='上周'
          } else if (nowDate > currentWeekEnd) {
              this.checkInDailyTitle = '下周签到进度'
              this.checkInDailyFlag ='下周'
          } else {
              this.checkInDailyTitle = '本周签到进度'
              this.checkInDailyFlag ='本周'
          }


          let date

          if (dif === -2 || dif > 0 && dif !== 2) {
              // 向右划的情况，日期增加
              if (this.open) {
                  date = new Date(this.selectDay.year, this.selectDay.month)
                  this.setMonth(date.getFullYear(), date.getMonth() + 1, undefined)
                  this.getIndexList({
                      setYear: this.selectDay.year,
                      setMonth: this.selectDay.month,
                      dateIndex: rest
                  })
                  this.$emit('monthChange', this.monthParams(this.selectDay))
              } else {
                  date = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day + 7)
                  let isMonthChange = false
                  if (date.getMonth() + 1 > this.selectDay.month) {
                      isMonthChange = true
                  }

                  this.setMonth(date.getFullYear(), date.getMonth() + 1, date.getDate())
                  this.getIndexList({
                      setYear: this.selectDay.year,
                      setMonth: this.selectDay.month - 1,
                      setDay: this.selectDay.day + 7,
                      dateIndex: rest
                  })
                  if (isMonthChange) {
                      this.$emit('monthChange', this.monthParams(this.selectDay))
                  }
              }
          } else {
              // 向左划的情况，日期减少
              if (this.open) {
                  date = new Date(this.selectDay.year, this.selectDay.month - 2)
                  this.setMonth(date.getFullYear(), date.getMonth() + 1, undefined)
                  this.getIndexList({
                      setYear: this.selectDay.year,
                      setMonth: this.selectDay.month - 2,
                      dateIndex: rest
                  })
                  this.$emit('monthChange', this.monthParams(this.selectDay))
              } else {
                  date = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day - 7)
                  let isMonthChange = false
                  if (date.getMonth() + 1 < this.selectDay.month) {
                      isMonthChange = true
                  }

                  this.setMonth(date.getFullYear(), date.getMonth() + 1, date.getDate())
                  this.getIndexList({
                      setYear: this.selectDay.year,
                      setMonth: this.selectDay.month - 1,
                      setDay: this.selectDay.day - 7,
                      dateIndex: rest
                  })
                  if (isMonthChange) {
                      this.$emit('monthChange', this.monthParams(this.selectDay))
                  }
              }
          }
          this.oldCurrent = e.detail.current
          this.setSwiperHeight(e.detail.current)
      },

      setSwiperHeight (index) {
          const currentRow = this[`dateList${index}`].length / 7
          // 根据指定位置数组的大小计算长度

          if (currentRow === 1) {
              this.swiperHeight = 145 + 8
          }
          this.swiperHeight = (currentRow - 1) * 145 + 145 + 40
      },

      // 更新指定的索引和月份的列表
      getIndexList ({
          setYear,
          setMonth,
          setDay = void 0,
          dateIndex
      }) {
          let appointMonth
          if (setDay) {
              appointMonth = new Date(setYear, setMonth, setDay)
          } else {
              appointMonth = new Date(setYear, setMonth)
          }
          const listName = `dateList${dateIndex}`
          this[listName] = this.dateInit({
              setYear: appointMonth.getFullYear(),
              setMonth: appointMonth.getMonth() + 1,
              setDay: appointMonth.getDate(),
              hasBack: true
          })
      },

      // 设置月份
      setMonth (setYear, setMonth, setDay) {
          const day = Math.min(new Date(setYear, setMonth, 0).getDate(), this.selectDay.day)

          if (this.selectDay.year !== setYear || this.selectDay.month !== setMonth) {
              this.selectDay = {
                  year: setYear,
                  month: setMonth,
                  day: setDay || day
              }

              if (!setDay) {
                  this.open = true
              }
              this.$emit('selectDay', this.formatOutputDate())
          } else {
              this.selectDay = {
                  year: setYear,
                  month: setMonth,
                  day: setDay || day
              }
              this.$emit('selectDay', this.formatOutputDate())
          }
      },
      formatOutputDate (date) {
          let selectDay
          if (date) {
              selectDay = date
          } else {
              selectDay = this.selectDay
          }

          return `${selectDay.year}-${selectDay.month.toString().padStart(2, '0')}-${selectDay.day.toString().padStart(2, '0')}`
      },

      // 展开收起
      openChange () {
          this.open = !this.open
          this.$emit('aaa', {
              a: 0
          }) // 更新数据

          const selectDate = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day)

          if (this.oldCurrent === 0) {
              this.updateList(selectDate, -1, 2)
              this.updateList(selectDate, 0, 0)
              this.updateList(selectDate, 1, 1)
          } else if (this.oldCurrent === 1) {
              this.updateList(selectDate, -1, 0)
              this.updateList(selectDate, 0, 1)
              this.updateList(selectDate, 1, 2)
          } else if (this.oldCurrent === 2) {
              this.updateList(selectDate, -1, 1)
              this.updateList(selectDate, 0, 2)
              this.updateList(selectDate, 1, 0)
          }

          this.setSwiperHeight(this.oldCurrent)
      },

      // 选中并切换今日日期
      switchNowDate () {
          const now = new Date()
          const selectDate = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day)
          const dateDiff = (selectDate.getFullYear() - now.getFullYear()) * 12 + (selectDate.getMonth() - now.getMonth())
          const diff = dateDiff === 0 ? 0 : dateDiff > 0 ? -1 : 1

          const diffSum = x => (3 + x % 3) % 3

          if (this.oldCurrent === 0) {
              this.updateList(now, -1, diffSum(2 + diff))
              this.updateList(now, 0, diffSum(0 + diff))
              this.updateList(now, 1, diffSum(1 + diff))
          } else if (this.oldCurrent === 1) {
              this.updateList(now, -1, diffSum(0 + diff))
              this.updateList(now, 0, diffSum(1 + diff))
              this.updateList(now, 1, diffSum(2 + diff))
          } else if (this.oldCurrent === 2) {
              this.updateList(now, -1, diffSum(1 + diff))
              this.updateList(now, 0, diffSum(2 + diff))
              this.updateList(now, 1, diffSum(0 + diff))
          }

          this.swiperCurrent = diffSum(this.oldCurrent + diff)
          this.oldCurrent = diffSum(this.oldCurrent + diff)
          this.backChange = dateDiff !== 0
          this.selectDay = {
              year: now.getFullYear(),
              month: now.getMonth() + 1,
              day: now.getDate()
          }
          this.$emit('selectDay', this.formatOutputDate())
          this.$emit('monthChange', this.monthParams(this.selectDay))
          this.setSwiperHeight(this.oldCurrent)
      },

      // 日历主体的渲染方法
      dateInit ({
          setYear,
          setMonth,
          setDay = this.selectDay.day,
          hasBack = false
      } = {
          setYear: this.selectDay.year,
          setMonth: this.selectDay.month,
          setDay: this.selectDay.day,
          hasBack: false
      }) {
          const dateList = [] // 需要遍历的日历数组数据

          const now = new Date(setYear, setMonth - 1) // 当前月份的1号

          const startWeek = now.getDay() // 目标月1号对应的星期

          const resetStartWeek = startWeek === 0 ? 6 : startWeek - 1 // 重新定义星期将星期天替换为6其余-1

          const dayNum = new Date(setYear, setMonth, 0).getDate() // 当前月有多少天

          const forNum = Math.ceil((resetStartWeek + dayNum) / 7) * 7 // 当前月跨越的周数

          const selectDay = setDay || this.selectDay.day
          this.$emit('getDateList', {
              setYear: now.getFullYear(),
              setMonth: now.getMonth() + 1
          })

          if (this.open) {
              // 展开状态，需要渲染完整的月份
              for (let i = 0; i < forNum; i++) {
                  const now2 = new Date(now)
                  now2.setDate(i - resetStartWeek + 1)
                  let obj = {}
                  obj = {
                      day: now2.getDate(),
                      month: now2.getMonth() + 1,
                      year: now2.getFullYear()
                  }
                  dateList[i] = obj
              }
          } else {
              // 非展开状态，只需要渲染当前周
              for (let i = 0; i < 7; i++) {
                  const now2 = new Date(now) // 当前周的7天

                  now2.setDate(Math.ceil((selectDay + (startWeek - 1)) / 7) * 7 - 6 - (startWeek - 1) + i)
                  let obj = {}
                  obj = {
                      day: now2.getDate(),
                      month: now2.getMonth() + 1,
                      year: now2.getFullYear()
                  }
                  dateList[i] = obj
              }
          }
          if (hasBack) {
              return dateList
          }

          this.dateList1 = dateList
      },

      // 一天被点击时
      selectChange (e) {
          const year = e.currentTarget.dataset.year
          const month = e.currentTarget.dataset.month
          const day = e.currentTarget.dataset.day
          const selectDay = {
              year: year,
              month: month,
              day: day
          }

          if (this.open && (this.selectDay.year !== year || this.selectDay.month !== month)) {
              if (year * 12 + month > this.selectDay.year * 12 + this.selectDay.month) {
                  // 下个月
                  if (this.oldCurrent === 2) {
                      this.swiperCurrent = 0
                  } else {
                      this.swiperCurrent = this.oldCurrent + 1
                  }
              } else {
                  // 点击上个月
                  if (this.oldCurrent === 0) {
                      this.swiperCurrent = 2
                  } else {
                      this.swiperCurrent = this.oldCurrent - 1
                  }
              }

              this.selectDay.day = day

              this.$emit('selectDay', this.formatOutputDate())
          } else if (this.selectDay.day !== day) {
              this.selectDay = selectDay
              this.$emit('selectDay', this.formatOutputDate())
          }
          this.updateCheckInStatus(selectDay);
      },
      updateCheckInStatus(selectDay) {
          const dateKey = `${selectDay.year}-${String(selectDay.month).padStart(2, '0')}-${String(selectDay.day).padStart(2, '0')}`;
          const isCheckedIn = this.checkInData[dateKey];

          if (isCheckedIn) {
              this.checkInStatusText = '今日签到成功';
              this.checkInStatusClass = 'checked-in';
          } else {
              this.checkInStatusText = '今日未签到';
              this.checkInStatusClass = 'not-checked-in';
          }
      },
      updateList (date, offset, index) {
          if (this.open) {
              // 打开状态
              const setDate = new Date(date.getFullYear(), date.getMonth() + offset * 1) // 取得当前日期的上个月日期

              this.getIndexList({
                  setYear: setDate.getFullYear(),
                  setMonth: setDate.getMonth(),
                  dateIndex: index
              })
          } else {
              const setDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + offset * 7) // 取得当前日期的七天后的日期

              this.getIndexList({
                  setYear: setDate.getFullYear(),
                  setMonth: setDate.getMonth(),
                  setDay: setDate.getDate(),
                  dateIndex: index
              })
          }
      },
      // 根据月份计算当前月初始和结束日期
      monthParams (e) {
          let monthList = {}
          let dataDate
          let nowDate
          if (e.month < 10) {
              if (e.day < 10) {
                  nowDate = e.year + '-0' + e.month + '-0' + e.day
              } else {
                  nowDate = e.year + '-0' + e.month + '-' + e.day
              }
          } else {
              if (e.day < 10) {
                  nowDate = e.year + '-' + e.month + '-0' + e.day
              } else {
                  nowDate = e.year + '-' + e.month + '-' + e.day
              }
          }
          if (e) {
              dataDate = new Date(nowDate)
          } else {
              dataDate = new Date()
          }
          const myYear = dataDate.getFullYear()
          const myMonth = dataDate.getMonth()
          const firstDay = new Date(myYear, myMonth, 1)
          const lastDay = new Date(myYear, myMonth + 1, 0)

          monthList['startTime'] = `${firstDay.getFullYear()}-${(firstDay.getMonth() + 1).toString().padStart(2, '0')}-${firstDay.getDate().toString().padStart(2, '0')}`
          monthList['endTime'] = `${lastDay.getFullYear()}-${(lastDay.getMonth() + 1).toString().padStart(2, '0')}-${lastDay.getDate().toString().padStart(2, '0')}`
          monthList = Object.assign(monthList, e)
          return monthList
      }

  }

}
</script>
<style lang="scss" scoped>
.checkInDailyBox {
  margin-top: 63rpx;
  width: 100%;
  background: #ffeadd;
  display: flex;
  flex-direction: column;
}

.week-switcher {
  display: flex;
  justify-content: space-around;
  margin-bottom: 16px;
}

.calendar .calendar-main .day {
  margin-bottom: 8px;
  position: relative;
  width: calc(100% / 7);
  color: #666;
  text-align: center;
  height: 145rpx; // 增加高度以容纳纵向排列的内容
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// 被选中且已签到的时候显示
.calendar .calendar-main .day .select .flag{
  top: 0px;
  position: absolute;
  width:100%;
  color: #FF6203;
  background-color: #FF6203;
  text-align: center;
  height: 6rpx;
}
// 被选中且未签到的时候显示
.calendar .calendar-main .day .select .noflag{
  top: 0px;
  position: absolute;
  width:100%;
  color: #D4D4D4;
  background-color: #D4D4D4;
  text-align: center;
  height: 6rpx;
}
// 日期
.calendar .calendar-main .day .date {
  margin-top: 20rpx;
  font-size: 22rpx;
  line-height: 22rpx;
  font-weight: bold;
}
// 周
.calendar .calendar-main .day .week {
  font-size: 28rpx;
  line-height: 28rpx;
  color: #111;
  margin-top: 20rpx;
}

.calendar .calendar-main .day .check-in-status {
  font-size: 12px;
  color: #111111;
  width: 4px;
  height: 4px;
  // bottom: 4px;
  // margin-top: 16rpx;
}

.icon {
  // background: url("https://web-static-cdn.oss-cn-beijing.aliyuncs.com/centralPlatform/wearable-device-wx/calendarPackUp.png") no-repeat center;
  background-size: 16px;
  width: 24px;
  height: 24px;
  margin: 0 9.5px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.swiper {
  transition: height 0.3s
}

.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.today {
  height: 18px;
  background: #fff;
  border-radius: 11px;
  font-size: 12px;
  line-height: 18px;
  color: #ABAEB2;
  text-align: center;
  padding: 0px 4px;
}

.today:active {
  background: #dfdfdf;
  color: #5f6464
}

.direction-column {
  flex-direction: column
}

.flex1 {
  flex: 1
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center
}

.flex-start {
  display: flex;
  // justify-content: flex-start;
  justify-content: space-between;
  align-items: center
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center
}

.flex-wrap {
  flex-wrap: wrap
}

.align-start {
  align-items: flex-start
}

.align-end {
  align-items: flex-end
}

.align-stretch {
  align-items: stretch
}

.calendar .title {
  line-height: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #1C2525;
  margin-bottom: 16px;
}

.calendar .title .year-month {
  margin-right: 10px
}

.calendar .title .icon {
  padding: 0 8px;
  font-size: 16px;
  color: #999
}

.calendar .title .open {
  background-color: #f6f6f6;
  color: #999;
  font-size: 11px;
  line-height: 18px;
  border-radius: 9px;
  padding: 0 7px
}

.list-open {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

.list-openR,
.list-openL {
  flex: 1;
  display: block;
  background: #E8E9EB;
  height: 1rpx;
}

.fold {
  transform: rotate(0deg)
}

.unfold {
  transform: rotate(180deg)
}

.calendar .calendar-week {
  display: flex;
  justify-content: space-between;
  line-height: 32px;
  height: 32px;
  // margin-bottom: 8px;
  font-size: 14px;
  color: #757980;
  // width: calc(100% - 12rpx);
}

.calendar .calendar-week .view {
  flex: 1;
  text-align: center;
}

.calendar .calendar-main {
  transition: height 0.3s;
  align-content: flex-start;
  height: 145rpx;
  // background-color: #4CAF50;
}

.calendar .calendar-main .day {
  margin-bottom: 8px;
  position: relative;
  width: calc((100% - 20rpx) / 7);
  color: #666;
  text-align: center;
  height: 145rpx;
  background-color: #FFF3EC;
  // margin-right: 2rpx; 
}

.calendar .calendar-main .day:nth-last-child(-n+7) {
  margin-bottom: 0;
  // margin-right: 0;
}

.calendar .calendar-main .day .bg {
  height: 145rpx;
  font-size: 14px;
  color: #333;
  background-color: #FFF3EC;
}

.calendar .calendar-main .day .select {
  // width: 32px;
  height: 145rpx;
  // border-radius: 50%;
  text-align: center;
  color: #111111;
  background: #ffffff;
  margin: 0 auto;
  width:100%;
  box-shadow: 0 2px 4px 0 #d6d6d6;
}

.calendar .calendar-main .day .spot::after {
  position: absolute;
  content: ' ';
  display: block;
  width: 32rpx;
  height: 22rpx;
  bottom: 14rpx;
  background: url('https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/duigou.png') no-repeat;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto
}

.calendar .calendar-main .day .deep-spot::after {
  position: absolute;
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  bottom: 14rpx;
  background: #F76965;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto
}

.calendar .calendar-main .day .other-month {
  color: #ccc
}

.header-wrap .month {
  font-size: 18px;
  font-weight: bold;
  color: #242629;
  line-height: 18px;
}

.checkInDailyRecordD {
  margin-top: 16rpx;
  background: #ffffff;
  height: 145rpx;
  box-shadow: 0 4px 10px 0 #d6d6d6;
  padding-left: 24rpx;
  display: flex;
  align-items: center;

  span{
      width: 12rpx;
      height: 12rpx;
      background:#D4D4D4;
      border-radius: 50%;
      margin-right: 26rpx;
  }
}
// 定义签到成功的样式类
.checked-in {
  // background-color: #d4edda; // 绿色背景表示签到成功
  color: #155724;
  
  span{
      width: 12rpx;
      height: 12rpx;
      background:#FF6203;
      border-radius: 50%;
      margin-right: 26rpx;
  }
}

// 定义未签到的样式类
.not-checked-in {
  // background-color: #f8d7da; // 红色背景表示未签到
  color: #721c24;
  span{
      width: 12rpx;
      height: 12rpx;
      background:#D4D4D4;
      border-radius: 50%;
      margin-right: 26rpx;
  }
}

.mr2{
  margin-right: 2rpx;
}
</style>
